/* eslint-disable array-callback-return */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-alert */
import React, { useRef, useState, useEffect } from 'react';
import Container from '@mui/material/Container';
import {
  Routes,
  Route,
  useLocation,
  Link,
  Navigate,
  Redirect,
  useNavigate,
} from 'react-router-dom';
import Avatar from '@mui/material/Avatar';
import { SettingFilled, QuestionCircleFilled } from '@ant-design/icons';
import IconButton from '@mui/material/IconButton';
import IconFont from '@/renderer/components/IconFont';
import CloseBtn from '@/renderer/components/CloseBtn';
import Divider from '@mui/material/Divider';
import { Scrollbars } from 'react-custom-scrollbars';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { ipcRenderer } from 'electron';
import { change } from '@/renderer/store/snackbar';
import { useDispatch } from 'react-redux';
import Homepage from './homepage';
import Webdevloper from './webdevloper';
import Backdevloper from './backdevloper';
import ProjectSetting from './homepage/projectsetting/index';
import Tester from './tester';
import './index.css';

const routelist = [
  {
    icon: 'icon-home-fill',
    path: '',
  },
  {
    icon: 'icon-webduan',
    path: 'webdevloper',
  },
  {
    icon: 'icon-androiddebugbridge',
    path: 'tester',
  },
  {
    icon: 'icon-tools-fill',
    path: 'backdevloper',
  },
];

function Home() {
  const [active, setactive] = useState(0);
  const scrollRef = useRef();
  const location = useLocation();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [arg, setarg] = useState({});
  useEffect(() => {
    scrollRef.current.view.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth',
    });
    let index = 0;
    routelist.map((it, i) => {
      if (location.pathname.includes(it.path)) {
        index = i;
      }
    });
    setactive(index);
  }, [location.pathname]);

  ipcRenderer.on('project_created', (event, args) => {
    if (args?.id) {
      localStorage.setItem(args?.name, args?.value);
      setTimeout(() => {
        dispatch(
          change({
            open: true,
            message: '项目初始化成功!',
            severity: 'success',
          })
        );
        navigate('/home/webdevloper', {
          replace: true,
          state: { id: args?.id },
        });
      }, 1000);
    }
  });
  ipcRenderer.on('paths', (event, args) => {
    if (args) {
      setarg(args);
    }
  });

  return (
    <div
      style={{
        padding: '0 12px',
        overflow: 'hidden',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <div style={{ height: 12 }} />
      <CloseBtn hide />
      <div
        style={{
          padding: '0 8px 12px 8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          height: 48,
          borderBottom: '1px solid #333',
        }}
      >
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            position: 'relative',
          }}
        >
          <div
            style={{
              position: 'absolute',
              left: 0,
              top: 0,
              width: 36,
              height: 68,
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <div
              style={{
                width: 36,
                height: 36,
                borderRadius: 4,
                backgroundColor: '#000000',
                transform: `translateX(${54 * active}px)`,
                transition: 'all 200ms ease-in-out',
              }}
            />
          </div>
          {/* 菜单 */}
          <div
            style={{
              height: 68,
              zIndex: 12,
              left: 120,
              top: 0,
              display: 'flex',
              alignItems: 'center',
            }}
          >
            {routelist.map((it, i) => {
              return (
                <Link
                  to={it.path}
                  key={it.icon}
                  className="menuitem"
                  onClick={() => {
                    setactive(i);
                  }}
                >
                  <IconFont
                    type={it.icon}
                    style={{
                      color: active == i ? '#f9f9f9' : '#676767',
                      fontSize: 18,
                    }}
                  />
                </Link>
              );
            })}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <IconButton color="primary">
            <IconFont
              type="icon-user1"
              style={{ color: '#676767', fontSize: 18 }}
            />
          </IconButton>
          <Divider orientation="vertical" style={{ margin: '0 4px' }} />
          <IconButton color="primary">
            <SettingFilled style={{ color: '#676767', fontSize: 16 }} />
          </IconButton>
          <IconButton
            style={{
              color: '#999999',
              height: '100%',
              marginLeft: 12,
            }}
            size="small"
            onClick={() => {
              window.open(
                'http://192.168.40.7/pr/dumidocs/#/components/init-form'
              );
            }}
          >
            <QuestionCircleFilled />
          </IconButton>
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'hidden' }}>
        <Scrollbars
          thumbMinSize={10}
          autoHide
          style={{
            width: '100%',
            height: '100%',
          }}
          hideTracksWhenNotNeeded
          ref={scrollRef}
        >
          <TransitionGroup>
            <CSSTransition
              key={location.pathname}
              classNames="fade"
              timeout={300}
            >
              <Routes>
                <Route index element={<Homepage />} />
                <Route path="webdevloper" element={<Webdevloper arg={arg} />} />
                <Route path="backdevloper" element={<Backdevloper />} />
                <Route path="tester" element={<Tester />} />
                <Route path="projectsetting" element={<ProjectSetting />} />
              </Routes>
            </CSSTransition>
          </TransitionGroup>
        </Scrollbars>
      </div>
      <div style={{ height: 12 }} />
    </div>
  );
}

export default Home;
